<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
    <head>        
        <title>百市千县-广告时长设置</title>
        <!-- META SECTION -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <!-- END META SECTION -->
        
        <!-- CSS INCLUDE -->        
        <link rel="stylesheet" href="${ctx}/rs/css/bootstrap-table.css" />
        <link rel="stylesheet" href="${ctx}/rs/css/main.css" />
        <link id="theme" rel="stylesheet" href="${ctx}/rs/joli/css/theme-default.css" />
        <!-- EOF CSS INCLUDE -->                                    
    </head>
<body>
	
	<!-- START PAGE CONTAINER -->
        <div class="page-container">
        	<!-- 引入左菜单部分 -->
            <jsp:include page="../joli/menu.jsp"></jsp:include>
            
            <!-- START PAGE CONTENT -->
            <div class="page-content">
                
                <jsp:include page="../joli/top.jsp"></jsp:include>
                
                <!-- START BREADCRUMB -->
                <ul class="breadcrumb">
                    <li><a href="#">FM广告管理</a></li>                    
                    <li class="active">报价方案管理</li>
                </ul>
                <!-- END BREADCRUMB -->   
                
                
                <!-- PAGE CONTENT WRAPPER -->
                <div class="page-content-wrap">
                	<div class="row">
                		<div class="col-xs-12">
                			<div class="pageTab">
                				<a href="${ctx}/send.htm?page=bsqx_quotation/timeLevelList">时段级别设置</a>
                				<a href="${ctx}/send.htm?page=bsqx_quotation/durationList" class="active">广告时长设置</a>
                				<a href="${ctx}/bsqx/toQuotationList.htm">报价方案设置</a>
                			</div>
                			<hr style="margin-top: 5px;"/>
                			<div id="toolbar">
                				<div class="row">
                					<form id="form1" action="${ctx}/bsqx/saveDurationInfo.htm" method="post">
                						<div class="form-group">
										<div class="col-xs-1 mw120">
											<span class="help-block" id="valierr" style="color:#FF9966">*</span>
											<span>广告时长</span>
										</div>
										<div class="form-group col-xs-2 mw120">
											<input type="text" class="form-control mt2" id="key" name="key" maxlength="4" placeholder="请输入广告时长，单位为秒"/>
										</div>
										<div class="col-xs-1">
											<input type="button" class="btn btn-default" onclick="valiSubmit();" value="添加"/>
										</div>
									</div>
                					</form>
                					
                				</div>
                				<hr/>
								<h5 class="unableTxt">时段列表</h5>
							</div>
							
							<table id="table" cellpadding="0" cellspacing="0" data-toggle="table" data-toolbar="#toolbar"
								data-url="${ctx}/ddInfo/page.htm"
								data-cache="false"
								data-pagination="true" 
								data-side-pagination="server"
								data-page-list="[10, 20, 50, 100]"
								data-page-size="20"  
								data-query-params="queryParams">
								<thead>
									<tr class="tab-th">
										<th data-field="value" class="col-md-8">广告时长（秒）</th>
										<th data-field="action" data-formatter="actionFormatter" class="col-md-8">操作</th>
									</tr>
								</thead>
							</table>
                		</div>
             		</div>
            	</div>
		</div>
		</div>
	<!-- 引入所有joli的脚本 -->
	<jsp:include page="../joli/scripts.jsp"></jsp:include>
	<!-- 引入页面需要的脚本 -->
	<script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table-zh-CN.js"></script>
	<script src="${ctx}/rs/js/jquery.formatDate.js"></script>
	<script src="${ctx}/rs/js/my97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${ctx}/rs/js/session-out-error.js"></script>
	<script src="${ctx}/rs/js/jquery.validate.min.js"></script>
	<script src="${ctx}/rs/js/jquery.form.js" type="text/javascript"></script>
	<script src="${ctx}/rs/js/messages_zh.min.js"></script>
	
	<script>
	  activeMenu($("#menu_fmgggl_1"));
	  
	  /* 新增操作验证start */
	  //初始化验证 start
	  //自定义验证
	  
	  
		var form = $('#form1');
		form.validate({
			rules : {
				key : {
					required : true,
					number: true,
					min: 0
				}
			},
			messages : {
				
			},
			highlight : function(element) {
				$(element).closest('.form-group').removeClass('success').addClass(
						'error');
			},
			success : function(element) {
				element.text('OK!').addClass('valid').closest('.form-group')
						.removeClass('error').addClass('success');
			}
		});
		
		function valiSubmit() {
			if (form.valid()) {
				var options = {
						dataType : "json",
						beforeSubmit : function() {
							$(".unable").show();
						},
						success : function(result) {
							if(!$('.unable').is(':hidden')){
								$(".unable").hide();
							}
							if ((typeof result == 'boolean') && result) {
								// 普通消息提示条
								bootstrapQ.msg({
									msg : '保存成功！',
									type : 'success',
									time : 2000
								});
								refresh();
							} else if(typeof result == 'boolean') {
								bootstrapQ.msg({
									msg : '保存失败！',
									type : 'danger',
									time : 2000
								});
							}else{
								bootstrapQ.msg({
									msg : result,
									type : 'danger',
									time : 2000
								});
							}
						},
						error : function(result) {
							if(!$('.unable').is(':hidden')){
								$(".unable").hide();
							}
							bootstrapQ.msg({
								msg : "保存失败！",
								type : 'danger',
								time : 2000
							});
						}
					};
					form.ajaxSubmit(options);
					return false;
			}
		}
		
	/* 表单验证end */
	  
	  var $table = $('#table');
      
      $table.on('click-row.bs.table', function (e, row, $element) {
	    	$table.bootstrapTable('uncheckAll');
	    	$table.bootstrapTable('check', $element.index());
      });
      
      $table.bootstrapTable({
          height: getHeight()
      });
	    
      //获取分辨率高度
	    function getHeight() {
	        return window.screen.height - 408;
	    }
	    
	    $(window).resize(function () {
      	$table.bootstrapTable('resetView',{height: getHeight()});
      });
	    
	    //初始化刷新
	     function refresh(pageIndex,selectPage){
	    	if(!pageIndex && !selectPage){
	    		pageIndex = 0;
	    		selectPage = 0;
	    	}
			var pageSize = $table.bootstrapTable('getOptions').pageSize;
			pageIndex=pageIndex*pageSize;
	    	$table.bootstrapTable('refresh', {
	    		silent: true,
	    		cache : false,
	    		url: '${ctx}/ddInfo/page.htm',
                query: {
                	key: 'DURATION_TYPE',
	   				pageIndex : pageIndex,
	   				pageSize : pageSize
	   			}
           });
	    	$table.bootstrapTable('selectPage', selectPage);
	    }
	    
	    function add() {
	    	var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
			var pageIndex = pageNumber - 1;
			bootstrapQ.dialog({
				url : '${ctx}/user/add.htm',
				title : '新增图文资讯',
				width : "750px",
				scrolly : "true",
				bheigth : "430px",
				close : 'true',
				hidebtn : 'true'
			},function(){
				//回调触发关闭窗口
				$("#bsmodal").modal("hide");
				refresh(pageIndex,pageNumber);
			});
		};
		
		function edit() {
			var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
			var pageIndex = pageNumber - 1;
			var rows = $table.bootstrapTable('getSelections');
			if (rows.length == 1) {
				bootstrapQ.dialog({
					url : "${ctx}/user/edit.htm?id="+ rows[0].id,
					title : "编辑图文资讯",
					width : "750px",
					scrolly : "true",
					bheigth : "430px",
					close : 'true',
					hidebtn : 'true'
				},function(){
					//回调触发关闭窗口
					$("#bsmodal").modal("hide");
					refresh(pageIndex,pageNumber);
				});
			}else{
				bootstrapQ.alert("请选中一条记录");
			}
       }
		
		function removeData(id) {
		   var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
		   var pageIndex = pageNumber - 1;
		   var rows = $table.bootstrapTable('getSelections');
		   var len=$("#table tbody").find("tr").length;
	       if(len==rows.length){
		        pageIndex = pageIndex - 1;
		   }
           if(id||rows.length > 0){
           	bootstrapQ.confirm('确定删除选中记录？',function(){
           		var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                       return row.id;
                   });
           		ids = id?[id]:ids;
                   $.ajax({
                	   url: "${ctx}/bsqx/deleteDuration.htm?id="+id,
                       success: function (text) {
                       	bootstrapQ.msg({
    						    msg  : '删除成功！',
    						    type : 'success',
    						    time : 2000
    						});
                       	refresh(pageIndex,pageNumber);
                       },
                       error: function () {
                       	bootstrapQ.msg({
    						    msg  : '删除失败！',
    						    type : 'danger',
    						    time : 2000
    						});
                       	refresh(pageIndex,pageNumber);
                       }
                   });
   			},null);
           }else{
           	bootstrapQ.alert("请选择要删除的记录！");
           }
       }
		
	    function queryParams(params) {
			return {
				key: 'DURATION_TYPE',
				pageIndex : params.offset,
				pageSize : params.limit
			};
		}
		
		function actionFormatter(value, row, index){
			return '<a  href="javascript:removeData('+row.id+')">删除</a>';
		}
		
	</script>
</body>
</html>